<template>
    <el-container>
        <el-header>
            <el-col class="headname" >分类管理</el-col>
            <el-col class="btn">
                <el-button type="primary" plain @click="dialogFormVisible = true" >添加分类</el-button>
            </el-col>
        </el-header>
        <el-main>
            <el-table class="tablemenu"
                      :data="tableData"
                      stripe
                      style="width: 100%">

                <el-table-column
                        prop="goodsTypeId"
                        label="ID" width="60">
                </el-table-column>

                <el-table-column
                        prop="goodsTypeName"
                        label="分类名称">
                </el-table-column>

                <el-table-column   label="是否显示">
                    <templete  slot-scope="scope">
                        <el-switch
                                v-model="scope.row.goodsTypeState"
                                active-value="1"
                                inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                        >
                        </el-switch>
                    </templete>
                </el-table-column>



                <el-table-column prop="caozuo" label="操作">

                    <template slot-scope="scope">
                        <el-button   type="danger" icon="el-icon-delete" class="btn" circle @click="del(scope.row.goodsTypeId)"></el-button>
                        <el-button   type="primary" icon="el-icon-edit" class="btn" circle @click="mix(scope.row.goodsTypeId)"></el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-main>





        <!-- Form -->
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="200" class="frommenu">
                <el-form-item label="商品名称" prop="name" label-width="100">
                    <el-input v-model="form.shopName"></el-input>
                </el-form-item>


                <el-form-item label="是否显示" prop="type" class="radioleft">
                    <template>
                        <el-radio-group v-model="form.radio">
                            <el-radio  :label="1">是</el-radio>
                            <el-radio  :label="0" >否</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>


                <el-form-item label="分类描述" prop="jianjie" >
                    <el-input type="textarea" v-model="form.desc" rows="3"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSure">确 定</el-button>
            </div>
        </el-dialog>


        <!-- Form -->
        <el-dialog title="修改分类" :visible.sync="dialogFormVisible2">
            <el-form :model="form" label-width="200" class="frommenu">
                <el-form-item label="商品名称" prop="name" label-width="100">
                    <el-input v-model="form.shopName"></el-input>
                </el-form-item>


                <el-form-item label="是否显示" prop="type" class="radioleft">
                    <template>
                        <el-radio-group v-model="form.radio">
                            <el-radio  :label="1">是</el-radio>
                            <el-radio  :label="0" >否</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>


                <el-form-item label="分类描述" prop="jianjie" >
                    <el-input type="textarea" v-model="form.desc" rows="3"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="mixSure">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>

</template>

<script>
    export default {
        name: "classfirst",
        methods:{

            //添加
            addSure(){
                // console.log(this.form.shopName)
                // console.log(this.form.desc)
                // console.log(this.form.radio)
                this.dialogFormVisible = false;
                this.$axios.post('/api/goodsType/add',{
                    goodsTypeName:this.form.shopName,
                    goodsTypeDescribe:this.form.desc,
                    goodsTypeState:this.form.radio
                }).then((res)=>{
                    // console.log(res);
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                    this.getAllMes();
                })
            },


            //最终修改
            mixSure(){
                this.dialogFormVisible2=false
                this.$axios.post('/api/goodsType/edit?goodsTypeId='
                    +this.form.id+
                    "&goodsTypeName=" +this.form.shopName+
                    "&goodsTypeDescribe="+this.form.desc+
                    "&goodsTypeState="+this.form.radio,{

                }).then((res)=>{
                    // console.log(res)
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                    this.getAllMes();
                })

            },

            //修改
            mix(id){
                this.dialogFormVisible2=true
                console.log(id)

                this.form.id=id

                this.$axios.post('/api/goodsType/findEditGoodsType?goodsTypeId='+id,{

                }).then((res)=>{
                    // console.log("123")
                    // console.log(res)
                    this.form.shopName=res.data.data.goodsTypeName
                    this.form.desc=res.data.data.goodsTypeDescribe
                    this.form.radio=parseInt(res.data.data.goodsTypeState)
                })
            },


            //删除
            del(id){
                var arr=[];
                arr.push(id);
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }). then(() =>{
                this.$axios.post('/api/goodsType/delete',[...arr]).then((res)=>{
                    console.log(res.data)
                    this.getAllMes();
                })
                    this.$message({
                    type:'success',
                    message: '删除成功!'
                });
            }).catch(()=>{
                    this.$message({
                       type:'info',
                       message:'已取消删除!'
                    });
                });
     },
           // {
           //      this.$message({
           //          type: 'success',
           //          message: '删除成功!'
           //      });
           //  }).catch(() => {
           //      this.$message({
           //          type: 'info',
           //          message: '已取消删除'
           //      });
           //  });
           //  }
            //得到显示数据
            getAllMes(){
                this.$axios.post('/api/goodsType/list').then((res)=>{
                    // console.log("123456789")
                    // console.log(res.data.data)
                    this.tableData=res.data.data
                })
            }

        },




        data() {
            return {
                input: '',

                options: [

                ],
                value: '',
                totalCount:20,
                tableData: [

                ],
                dialogFormVisible2:false,
                dialogFormVisible: false,

                form: {
                    desc: '',
                    radio:1,
                    shopName: '',
                    id:'',


                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',

                },
                formLabelWidth: '120px'

            }
        },







        created() {
          this.getAllMes();
        }
    }
</script>

<style scoped>
    .headname{
        text-align: left;
        font-size: 18px;
    }
    .btn{
        text-align: left;
        margin-top: 5px;
    }
    .fenleiname{
        text-align: left;
    }
    .radioleft{
        text-align: left;
    }
    .frommenu{
        overflow: hidden;
    }
    /deep/ .el-input{
        width: 50%;
        float: left;
    }
</style>